<template>
  <el-button
    v-bind="buttonProps"
    @click="handleClick"
  >
    <slot />
  </el-button>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useTracking } from '@/utils/useTracking'

interface TrackingData {
  buttonName: string
  pageName: string
  extraData?: Record<string, any>
}

interface Props {
  trackingData?: TrackingData
  disableTracking?: boolean
  [key: string]: any
}

const props = withDefaults(defineProps<Props>(), {
  disableTracking: false
})

const emit = defineEmits<{
  click: [event: MouseEvent]
}>()

const { trackButtonClick } = useTracking()

// 处理按钮点击，同时触发埋点
const handleClick = (e: MouseEvent) => {
  // 先触发原始点击事件
  emit('click', e)
  
  // 再触发埋点（除非明确禁用）
  if (!props.disableTracking && props.trackingData) {
    const { buttonName, pageName, extraData = {} } = props.trackingData
    trackButtonClick(buttonName, pageName, extraData)
  }
}

// 排除埋点相关属性，保留其他按钮属性
const buttonProps = computed(() => {
  const { trackingData, disableTracking, ...rest } = props
  return rest
})
</script>

<script lang="ts">
export default {
  name: 'TrackableButton'
}
</script>

